
<template>
	<swiper v-if="list && list.length > 0" class="section-banner" :indicator-dots="true" :autoplay="autoplay" :interval="3000" :duration="500" :circular="true">
		<swiper-item v-for="bannerItem in list" :key="bannerItem.bannerId">
			<image class="section-banner-image" :src="bannerItem.pic" mode="aspectFit" @tap.stop.prevent="toDetail(bannerItem)" />
		</swiper-item>
	</swiper>
</template>

<script>
export default {
	name: 'SectionBanner',
	data() {
		return {
			autoplay: true
		};
	},
	// beforeCreate() {
	// 	console.log("组件创建SectionBanner"); 
	// },
	props:  { list: Array },
	// onShow() {
	// 	this.autoplay.value = true;
	// },
	// onHide() {
	// 	this.autoplay.value = false;
	// },
	methods: {
		toDetail(item) {
			console.log(item);
			// uni.redirectTo({
			//   url: encodeURIComponent(url)
			// })
		}
	}
};
</script>

<style lang="scss" scoped>
// banner
.section-banner {
	height: 270rpx;
	width: calc(100% - (var(--page-spacing) * 2));
	margin: 38rpx auto;
	clip-path: inset(0 round 19.2rpx);

	.section-banner-image {
		width: 100%;
		height: 100%;
	}
}
</style>
